<script setup>
import {ref,onMounted} from 'vue'
//导入markdown相关插件
import MarkdownIt from "markdown-it";  //把文本识别为markdown
import 'github-markdown-css'  //优化markdown样式

//----------------------------------四个tab与点击事件----------------------------------
const tabs=['对话功能', '智能助手创建', '自习室一览', '关于产品']
const isTitleSelected = ref([
  true,
  false,
  false,
  false
])
const SelectDocx = (index) => {
  for (let i = 0; i < isTitleSelected.value.length; i++) {
    isTitleSelected.value[i] = false
  }
  isTitleSelected.value[index] = true
  readMarkdown()
}

//----------------------------------读取 Markdown 文件----------------------------------
let result = ref('')  // 这是渲染好的Markdown，用以下文的v-html绑定
const readMarkdown= async ()=>{
  for (let i = 0; i < isTitleSelected.value.length; i++) {
    if (isTitleSelected.value[i]){
      try {
        // Markdown 文件位于 public 文件夹中
        const response = await fetch(`/words/markdownFile${i+1}.md`);
        if (!response.ok) {throw new Error('未获取到图片');}
        const markdownText = await response.text(); // 获取文件内容
        const md=new MarkdownIt();
        result.value = md.render(markdownText);
      } catch (error) {
        console.error('Error reading Markdown file:', error);
      }
    }
  }
}
onMounted(async () => {
    await readMarkdown()
});
</script>

<template>
<div class="container">
  <div class="left">
    <div class="head">文档中心</div>
    <div class="body">
      <a class="docx-item" v-for="(item,index) in tabs" :key="index" :class="{active: isTitleSelected[index]}" @click="SelectDocx(index)">{{ item }}</a>
    </div>
  </div>

  <div class="right" >
    <div v-if="isTitleSelected[0]" v-html="result" class="markdown-body"></div>
    <div v-if="isTitleSelected[1]" v-html="result" class="markdown-body"></div>
    <div v-if="isTitleSelected[2]" v-html="result" class="markdown-body"></div>
    <div v-if="isTitleSelected[3]" v-html="result" class="markdown-body"></div>
  </div>
</div>
</template>

<style scoped lang="scss">
.container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .left {
    top: 10%;
    width: 20%;
    height: 86vh;
    box-shadow: 0 5px 15px  rgba(201, 201, 201, 0.2);
    border-radius: 20px;
    background: rgba(253, 253, 254, 1);
    .head {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: bold;
      width: 100%;
      height: 10%;
      border-bottom: #e1e1e1 solid 1px;
      margin-bottom: 25px;
    }
    .body {
      width: 100%;
      height: 90%;
      .docx-item {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        letter-spacing: 1px;
        height: 10%;
        width: auto;
      }
      .docx-item:hover {
        color: #aa86fd;
      }
      .active {
        color: #aa86fd;
      }
    }
  }
  .right {
    width: 67%;
    height: 87vh;
    box-shadow: 0 5px 15px  rgba(201, 201, 201, 0.2);
    border-radius: 20px;
    background: rgba(253, 253, 254, 1);
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 50px 50px 25px;
  }
}
</style>
